<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>砭石</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/serve.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_842683_mrv087fj6um.css">
</head>

<body>
    <header>
        <div class="top">
            <div class="title">
                <div class="logo"><img src="../images/logoWhite.png" alt=""></div>
                <p>后台管理系统</p>
            </div>
            <div class="login">
                <div class="userName">
                    <i class="icon iconfont icon-iconfontzhizuobiaozhun023104"></i>
                    <span>SZZ</span>
                </div>
                <div class="btn">安全退出</div>
            </div>
        </div>
    </header>
    <main>
        <nav class="leftNav">
            <ul>
                <li>
                    <a href="./home.html">
                        <i class="iconfont icon-shouye2"></i>
                        <span>首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </a>
                </li>
                <li>
                    <a href="./vip.html">
                        <i class="iconfont icon-iconfontzhizuobiaozhun023104"></i>
                        <span>会员管理</span>
                    </a>
                </li>
                <li>
                    <a href="./appoint.html">
                        <i class="icon-yuyue1 iconfont"></i>
                        <span>预约管理</span>
                    </a>
                </li>
                <li class="active">
                    <a href="#">
                        <i class="icon-fuwuchuangb iconfont"></i>
                        <span>服务管理</span>
                    </a>
                </li>
                <li>
                    <a href="./news.html">
                        <i class="icon-xinwen iconfont"></i>
                        <span>新闻管理</span>
                    </a>
                </li>
                <li>
                    <a href="./store.html">
                        <i class="icon-dianpufill iconfont"></i>
                        <span>店铺管理</span>
                    </a>
                </li>
                <li>
                    <a href="./area.html">
                        <i class="icon-quyuditu iconfont"></i>
                        <span>区域设定</span>
                    </a>
                </li>
                <li>
                    <a href="./vipGrade.html">
                        <i class="icon-vip iconfont"></i>
                        <span>会员等级</span>
                    </a>
                </li>
                <li>
                    <a href="./order.html">
                        <i class="icon-dingdan iconfont"></i>
                        <span>订单管理</span>
                    </a>
                </li>
                <li>
                    <a href="./operatingCenter.html">
                        <i class="icon-shezhi iconfont"></i>
                        <span>运营中心</span>
                    </a>
                </li>
                <li>
                    <a href="./record.html">
                        <i class="icon-jiankang iconfont"></i>
                        <span>健康档案</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="rightContent">
            <div class="title">当前所在位置：服务管理<span></span></div>
            <div class="content">
                <div class="serves backWit">
                    <div class="currentServe" style="overflow-y:auto; overflow-x:hidden;height: 28rem;">
                        <div class="serveBox active">
                            <div class="serve">
                                <p><img src="../images/img.jpg" alt=""></p>
                                <div class="serveInfo">
                                    <h2>砭石家庭特殊套餐</h2>
                                    <div class="numberCount">
                                        <span>￥120.0</span>
                                        <i>12次</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="serveBox">
                            <div class="serve">
                                <p><img src="../images/img.jpg" alt=""></p>
                                <div class="serveInfo">
                                    <h2>砭石家庭特殊套餐</h2>
                                    <div class="numberCount">
                                        <span>￥120.0</span>
                                        <i>12次</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="serveBox">
                            <div class="serve">
                                <p><img src="../images/img.jpg" alt=""></p>
                                <div class="serveInfo">
                                    <h2>砭石家庭特殊套餐</h2>
                                    <div class="numberCount">
                                        <span>￥120.0</span>
                                        <i>12次</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="serveBox">
                            <div class="serve">
                                <p><img src="../images/img.jpg" alt=""></p>
                                <div class="serveInfo">
                                    <h2>砭石家庭特殊套餐</h2>
                                    <div class="numberCount">
                                        <span>￥120.0</span>
                                        <i>12次</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="addServe">
                        创建新的服务内容
                    </div>
                </div>
                <div class="rightContent">
                    <div class="serveDetails" style="display:none">
                        <div class="operate"><span>编辑</span>
                            <p>删除</p>
                        </div>
                        <div class="serverHead backWit">
                            <div class="serveTitle">
                                <h2>砭石家庭特殊套餐</h2>
                                <p>50次</p>
                            </div>
                            <div class="num">
                                <div class="price">￥690.0</div>
                                <p>月销675笔</p>
                            </div>
                        </div>
                        <div class="serveText backWit">
                            <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
                            <img src="../images/img.jpg" alt="">
                        </div>
                    </div>
                    <div class="addEdit backWit">
                        <div class="name ipt">
                            <p>套餐名称</p><input type="text" name="name">
                        </div>
                        <div class="ipt iptTextarea">
                            <p>服务介绍</p><textarea></textarea>
                        </div>
                        <div class="name ipt">
                            <p>套餐价格</p><input type="text" name="name">
                        </div>
                        <div class="name ipt">
                            <p>所含次数</p><input type="text" name="name">
                        </div>
                        <div class="iptTextarea ipt">
                            <p>缩略图&nbsp; &nbsp;</p>
                            <div class="add">
                                <img src="" alt="">
                                <span>+</span>
                                <input type="file" name="" id="iptFile">
                            </div>
                        </div>
                        <div class="btn">保存</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script>
        $(function () {
            $('.serveBox').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
            $("#iptFile").change(function () {
                // console.log(URL.createObjectURL($(this)[0].files[0]))
                // $(".add img").attr("src", URL.createObjectURL($(this)[0].files[0]));
                var file = $("#iptFile").get(0).files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    $(".add img").attr("src", reader.result);
                    $(".add span").hide();
                }
            });
        })
    </script>
</body>

</html>